<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--http://www.imooc.com/article/2235-->
	<script type="text/javascript" src="../jquery1.7.1.src.js"></script>
	<style type="text/css">
		
		/*.wrap{
		    background:#ccc;
		    display:table;
		    margin:0 auto;
		}*/
		html{
			/*height: 100%;*/
		}
		body{
			/*height: 100%;
			display: flex;*/
			/*align-items: center;
			justify-content: center;*/
			
		}
		.wrap{

			
			background:#ccc;
		}

		/*.parent{display:table-cell;vertical-align:middle;text-align:center;} 
		.child{display:inline-block;}
		*/
		.left{
			background-color: red;
		}

		.right{
			background-color: blue;
		}

		.center{
			background-color: yellow;
		}

		/*
		.left{float:left;width:100px;} 
		.right{margin-left:100px;}*/

		/*.left{width:100px;float:left;} .right{overflow:hidden;}*/

		/*.left{width:100px;} .right{flex:1;}*/

		/*.left{width：100px;float:left;} 
		.center{float:left;width:100%;margin-right:-200px;} 
		.right{width:100px;float:right;}
		*/
		/*.parent{width:100%;display:table;table-layout:fixed} 
		.left,.center,.right{display:table-cell;} 
		.left{width:100px;} 
		.right{width:100px;}
		*/

		/*.parent{display:flex;} 
		.left{width:100px;} 
		.center{flex:1;} 
		.right{width:100px;}
*/

		/*.parent{display:table;table-layout:fixed;width:100%;} 
		.left{width:0.1%;} 
		.left,.right{display:table-cell;}
		.center{display: none;}*/

		/*.parent{display:flex;} .right{flex:1;}
		.center{display: none;}
		*/
/*
		.main-container {
		  float: left;
		  width: 100%;
		  height: 500px;
		}
		.main {
		  height: 500px;
		  background-color: aqua;
		  margin-left: 200px;
		  margin-right: 200px;
		}
		.left {
		  float: left;
		  width: 200px;
		  height: 500px;
		  margin-left: -100%;
		  background-color: red;
		}
		.right {
		  float: left;
		  width: 200px;
		  height: 500px;
		  margin-left: -200px;
		  background-color: blue;
		}
*/
/*
		.main-container {
		  float: left;
		  width: 100%;
		  height: 500px;
		  margin-left: -200px;
		}
		.main {
		  height: 500px;
		  background-color: aqua;
		  margin-left: 200px;
		  margin-right: 200px;
		}
		.left {
		  float: left;
		  width: 200px;
		  height: 500px;
		  
		  background-color: red;
		}
		.right {
		  float: left;
		  width: 200px;
		  height: 500px;
		  margin-left: -200px;
		  background-color: blue;
		}
*/

body{
	display: flex;
	height: 110vh;
}

.left{
	width: 200px
}

.main-container{
	flex: 1
}

.right{
	width: 200px;
}

	</style>
</head>
<body class="parent">
<!--
	<div class="wrap">
	  Hello world  
	</div>

	<div class="parent">
		<div class="child">ddddddddddd</div>
	</div>
-->
<!--
	<div class="left">
		leftleftleftleftleftleftleftleftleftleftleft
	</div>
	<div class="center">center</div>
	<div class="right">
		
		right
	</div>
-->

<div class="left">left</div>
<div class="main-container">
  <div class="main">main</div>
</div>

<div class="right">right</div>


</body>
</html>